<template>
  <view class="activity-detail-container">
    <!-- 活动封面 -->
    <view class="activity-cover">
      <image 
        :src="activity.cover || '/static/images/default-activity.jpg'" 
        mode="aspectFill"
        @error="onImageError"
      ></image>
    </view>
    
    <!-- 活动信息 -->
    <view class="activity-info">
      <view class="activity-title">{{ activity.name }}</view>
      <view class="activity-status" :class="getStatusClass(activity.status)">
        {{ getStatusText(activity.status) }}
      </view>
      <view class="activity-desc">{{ activity.description }}</view>
      
      <view class="info-item">
        <text class="label">活动时间：</text>
        <text class="value">{{ formatDateTime(activity.startTime) }} - {{ formatDateTime(activity.endTime) }}</text>
      </view>
      
      <view class="info-item">
        <text class="label">活动地点：</text>
        <text class="value">{{ activity.location || '待定' }}</text>
      </view>
    </view>
    
    <!-- 报名按钮 -->
    <view class="registration-section" v-if="activity.status !== 'ENDED'">
      <button 
        class="register-btn" 
        type="primary" 
        @click="showRegistrationDialog"
        :disabled="loading"
      >
        {{ loading ? '报名中...' : '立即报名' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ActivityDetail',
  data() {
    return {
      activityId: null,
      activity: {},
      loading: false
    }
  },
  
  onLoad(options) {
    this.activityId = options.id;
    this.loadActivityDetail();
  },
  
  methods: {
    // 加载活动详情
    async loadActivityDetail() {
      this.loading = true;
      try {
        const response = await uni.request({
          url: this.$baseUrl + `/activity/${this.activityId}`,
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
          }
        });
        
        if (response.statusCode === 200 && response.data.code === 200) {
          this.activity = response.data.data;
        } else {
          uni.showToast({
            title: response.data.message || '获取活动详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取活动详情失败:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 显示报名弹窗
    showRegistrationDialog() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      
      uni.navigateTo({
        url: `/pages/activity/register?activityId=${this.activityId}`
      });
    },
    
    // 格式化日期时间
    formatDateTime(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      switch (status) {
        case 'UPCOMING':
          return 'upcoming';
        case 'ONGOING':
          return 'ongoing';
        case 'ENDED':
          return 'ended';
        default:
          return 'upcoming';
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 'UPCOMING':
          return '即将开始';
        case 'ONGOING':
          return '进行中';
        case 'ENDED':
          return '已结束';
        default:
          return '即将开始';
      }
    },
    
    // 图片加载错误
    onImageError() {
      this.activity.cover = '/static/images/default-activity.jpg';
    }
  }
}
</script>

<style scoped>
.activity-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.activity-cover {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.activity-cover image {
  width: 100%;
  height: 100%;
}

.activity-info {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
}

.activity-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.activity-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  margin-bottom: 15px;
}

.activity-status.upcoming {
  background-color: #e6f7ff;
  color: #1890ff;
}

.activity-status.ongoing {
  background-color: #f6ffed;
  color: #52c41a;
}

.activity-status.ended {
  background-color: #f5f5f5;
  color: #999;
}

.activity-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
}

.info-item .label {
  font-size: 14px;
  color: #999;
  width: 80px;
  flex-shrink: 0;
}

.info-item .value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.registration-section {
  background-color: #fff;
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.register-btn {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
}
</style> 